<template>
  <div class="driver-box">
    <div class="search-box box-shadow">
      <a-form layout="inline">
        <a-form-item label="归属标段">
          <a-select v-model:value="cellQueryFormState.sections[0].sectionId">
            <a-select-option
                v-for="section in sections"
                :key="section.sectionId" :value="section.sectionId">
              {{section.sectionName}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="单元名称">
          <a-input v-model:value="cellQueryFormState.cellName"></a-input>
        </a-form-item>
        <a-form-item class="form-end">
          <a-button @click="resetQueryForm">重置</a-button>
          <a-button @click="getCellBaseInfoList" type="primary">查询</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="cell-table content-box box-shadow">
      <div class="content-header">
        <span>查询列表</span>
      </div>
      <div class="content-table">
        <a-table
            :scroll="{y:setHeight('.cell-table .content-table', 125) + 'px'}"
            :data-source="cellBaseInfoList.cellInfo"
            :rowKey="(record) => record.cellId"
            @change="getCellBaseInfoList"
            :pagination="{
                'current':cellBaseInfoList.startPage,
                'total':cellBaseInfoList.totalCount,
                'pageSize':cellBaseInfoList.everyPage,
                'showLessItems':true
              }">
          <a-table-column title="归属标段" data-index="sectionName"></a-table-column>
          <a-table-column title="单元名称" data-index="cellName"></a-table-column>
          <a-table-column title="创建时间" data-index="gtmCreateTime"></a-table-column>
          <a-table-column title="创建者" data-index="userName"></a-table-column>
          <a-table-column title="机械派遣" data-index="cellId">
            <template #default="{text,record}">
              <div class="table-icon-box">
                <div @click="getToCellDevice(record)">
                  <PlusCircleOutlined />
                </div>
              </div>
            </template>
          </a-table-column>
          <a-table-column title="结束派遣" data-index="cellId">
            <template #default="{text,record}">
              <div class="table-icon-box">
                <div @click="getInCellDevice(record)">
                  <MinusCircleOutlined />
                </div>
              </div>
            </template>
          </a-table-column>
        </a-table>
      </div>
    </div>
  </div>
  <SModal
      title="机械派遣"
      width="680"
      height="500"
      :isShow="showToCellModal"
      @closed="()=>showToCellModal=!showToCellModal">
    <div class="to-cell-box">
      <div class="search-modal">
        <a-form layout="inline">
          <a-form-item label="机械名称">
            <a-input v-model:value="deviceModalQuery.deviceName" />
          </a-form-item>
          <a-form-item label="机械编码">
            <a-input v-model:value="deviceModalQuery.deviceSn" />
          </a-form-item>
          <a-form-item class="end-btn">
            <a-button @click="getToNextCellDevice" type="primary">查询</a-button>
          </a-form-item>
        </a-form>
      </div>
      <div class="cell-modal">
        <a-table
            :scroll="{y:`260px`}"
            :data-source="toCellList.deviceInfo"
            :rowKey="(record) => record.deviceId"
            @change="getToNextCellDevice"
            :pagination="{
            'current':toCellList.startPage,
            'total':toCellList.totalCount,
            'pageSize':toCellList.everyPage,
            'showLessItems':true
          }">
          <a-table-column title="机械编号" data-index="deviceSn"></a-table-column>
          <a-table-column title="机械名称" data-index="deviceName"></a-table-column>
          <a-table-column title="机械类型" data-index="deviceKind">
            <template #default="{text}">
              <div>{{deviceTypeDict.getNameByCode(text)}}</div>
            </template>
          </a-table-column>
          <a-table-column title="派遣" data-index="deviceId">
            <template #default="{text,record}">
              <a-button @click="toCell(text)" type="primary">派遣</a-button>
            </template>
          </a-table-column>
        </a-table>
      </div>
    </div>
  </SModal>
  <SModal
      title="结束派遣"
      width="480"
      :isShow="showCloseToCellModal"
      @closed="()=>showCloseToCellModal=!showCloseToCellModal">
    <div class="smodal-box smodal-to-cell">
      <a-table
          :scroll="{y:`205px`}"
          :data-source="closeToCellList"
          :rowKey="(record) => record.deviceId"
          @change="getToNextCellDevice"
          :pagination="false">
        <a-table-column title="机械编号" data-index="deviceSn"></a-table-column>
        <a-table-column title="机械名称" data-index="deviceName"></a-table-column>
        <a-table-column title="机械类型" data-index="deviceKind">
          <template #default="{text}">
            <div>{{deviceTypeDict.getNameByCode(text)}}</div>
          </template>
        </a-table-column>
        <a-table-column title="结束派遣" data-index="deviceId">
          <template #default="{text,record}">
            <a-button @click="closeToCell(text)" type="primary">结束派遣</a-button>
          </template>
        </a-table-column>
      </a-table>
    </div>
  </SModal>
</template>

<script lang="ts">
import {useStore} from "vuex"
import {defineComponent, onMounted, ref} from "vue"
import {setHeight} from "@/utils/tableUtils"
import {cellBaseInfo} from "@/hooks/cell/index"
import {deviceBaseInfo} from "@/hooks/device/index"
import SModal from "@/components/SModal/index.vue"
import {PlusCircleOutlined,MinusCircleOutlined} from '@ant-design/icons-vue'
import axios from "@/utils/axios";
import {message} from "ant-design-vue";
import deviceTypeDict from "@/dicts/deviceTypeDict"

class DeviceQuery {
  deviceName: string | undefined = undefined
  deviceSn: string | undefined = undefined
}

export default defineComponent({
  setup(){
    const store = useStore()
    const sections = ref(JSON.parse(JSON.stringify(store.getters["userinfo/getUserSection"])))
    const {deviceRef, deviceFormState, deviceList, resetForm, getDeviceList} = deviceBaseInfo();
    const {cellQueryFormRef,cellQueryFormState,cellBaseInfoList,getCellBaseInfoList} = cellBaseInfo()

    const showToCellModal = ref(false)
    const toCellDeviceCellInfo:any = ref(undefined)
    const toCellList:any = ref({})

    const showCloseToCellModal = ref(false)
    const closeToCellDeviceCellInfo:any = ref(undefined)
    const closeToCellList:any = ref([])

    // 派遣查询
    const deviceModalQuery:any = ref(new DeviceQuery())

    const resetQueryForm = ()=>{
      if(sections.value.length>0){
        cellQueryFormState.value.sections[0].sectionId = sections[0].sectionId
        cellQueryFormState.value.sections[0].kind = [3,4]
      }
      cellQueryFormState.value.cellName = undefined
    }

    const getToCellDevice = (cellInfo:any)=>{
      toCellDeviceCellInfo.value = cellInfo
      deviceModalQuery.value = new DeviceQuery()
      let queryParms = {
        sections:[{
          sectionId:cellInfo.sectionId,
          kind:[cellInfo.kind]
        }],
        status:3,
        checkStatus:2,
        startPage:1,
        everyPage:30
      }
      axios.post("/common/findDevice", queryParms).then((res:any)=>{
        if(res.success){
          toCellList.value = res.data
          showToCellModal.value = true
        }else{
          message.info(res.msg)
        }
      })
    }

    const getToNextCellDevice = (pageInfo:any)=>{
      let queryParms:any = {
        sections:[{
          sectionId:toCellDeviceCellInfo.value.sectionId,
          kind:[toCellDeviceCellInfo.value.kind]
        }],
        status:0,
        checkStatus:2,
        deviceName:deviceModalQuery.value.deviceName,
        deviceSn:deviceModalQuery.value.deviceSn,
        startPage:pageInfo.current,
        everyPage:30
      }
      axios.post("/common/findDevice", queryParms).then((res:any)=>{
        if(res.success){
          toCellList.value = res.data
          showToCellModal.value = true
        }else{
          message.info(res.msg)
        }
      })
    }

    const toCell = (deviceId:number)=>{
      axios.post("/common/saveDeviceToCell",
          {cellId:toCellDeviceCellInfo.value.cellId,deviceId:[deviceId]})
          .then((res:any)=>{
            if(res.success){
              toCellList.value.deviceInfo.splice(
                  toCellList.value.deviceInfo.findIndex((item:any)=>{
                    return item.deviceId == deviceId
                  }),1)
              message.info("派遣成功")
            }else{
              message.info(res.msg)
            }
          })
    }

    const getInCellDevice = (cellInfo:any)=>{
      closeToCellDeviceCellInfo.value = cellInfo
      let queryParms = {
        cellId:cellInfo.cellId,
        kind:cellInfo.kind
      }
      axios.post("/common/findCellWorkMachineryByCellId",
          queryParms).then((res:any)=>{
        if(res.success){
          closeToCellList.value = res.data
          showCloseToCellModal.value = true
        }else{
          message.info(res.msg)
        }
      })
    }

    const closeToCell = (deviceId:number)=>{
      axios.post("/common/deleteDeviceFromCell",
          {deviceId:[deviceId]})
          .then((res:any)=>{
            if(res.success){
              closeToCellList.value.splice(
                  closeToCellList.value.findIndex((item:any)=>{
                    return item.deviceId == deviceId
                  }),1)
              message.info("结束成功")
            }else{
              message.info(res.msg)
            }
          })
    }

    onMounted(()=>{
      if(sections.value.length>0){
        // 设置为只查找开启状态的仓面
        // cellQueryFormState.value.status = 1
        cellQueryFormState.value.sections[0].sectionId = sections.value[0].sectionId
        cellQueryFormState.value.sections[0].kind = [3,4]
        // 设置查找施工中、已拒绝的单元
        cellQueryFormState.value.checkStatus = 4
        cellQueryFormState.value.everyPage = 10

        getCellBaseInfoList(null)
      }
    })

    return{
      sections,
      setHeight,
      deviceTypeDict,

      cellQueryFormRef,
      cellQueryFormState,
      cellBaseInfoList,
      getCellBaseInfoList,
      resetQueryForm,

      showToCellModal,
      toCellList,
      showCloseToCellModal,
      closeToCellList,
      getToCellDevice,
      getToNextCellDevice,
      toCell,
      getInCellDevice,
      closeToCell,

      deviceFormState,
      deviceList,
      resetForm,
      getDeviceList,

      deviceModalQuery
    }
  },
  components:{SModal,PlusCircleOutlined,MinusCircleOutlined}
})
</script>

<style lang="scss" scoped>
.driver-box{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .search-box{
    display: flex;
    width: 100%;
    height: 102px;
    align-items: center;
    padding: 0 38px;
    box-sizing: border-box;
    ::v-deep label{
      color: #666;
    }
    ::v-deep .ant-form{
      width: 100%;
    }
    ::v-deep .ant-select{
      width: 177px;
    }
    .form-end{
      float: right;
      ::v-deep button{
        margin-left: 12px;
      }
    }
  }
  .content-box{
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    margin-top: 20px;
    padding: 0 38px;
    box-sizing: border-box;
    .content-header{
      display: flex;
      width: 100%;
      padding: 18px 0 12px;
      flex-direction: row;
      justify-content: flex-start;
      box-sizing: border-box;
      span{
        display: block;
        font-size: 18px;
        font-weight: bold;
        line-height: 32px;
      }
      ::v-deep button{
        margin-right: 16px;
        margin-left: auto;
      }
    }
    .content-table{
      flex: 1;
      width: calc(100% - 16px);
      ::v-deep .table-icon-box{
        display: flex;
        justify-content: space-around;
        >div:hover{
          color: #1677FF;
        }
      }
    }
  }
}
.to-cell-box{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .search-modal{
    margin: 15px 0 10px;
    height: 40px;
    .end-btn{
      float: right;
      margin-right: 0;
      ::v-deep button{
        margin-left: 12px;
      }
    }
  }
  .cell-modal {
    position: relative;
    flex: 1;
    width: 100%;
    height: 100%;
    margin-top: 5px;
    box-sizing: border-box;
  }
}
.smodal-box{
  box-sizing: border-box;
}
.smodal-to-cell{
  width: 100%;
  height: 100%;
}
</style>
